<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>loginProviders Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>
<body>
<main role="main" class="container mt-3 mb-3">
    <div th:fragment="accepttoQRCode" th:remove="tag">

        <script type="text/javascript" src="https://faye.acceptto.com/faye/faye.js"></script>
        <script type="text/javascript" src="https://dbfp.acceptto.com/bfp.js"></script>
        <div class="card d-sm-none d-md-block bg-light">

            <div class="card-body">
                <div class="card-title">
                    <div class="text-center">
                        <h3><i class="fas fa-qrcode"></i> Login with QR Code</h3>
                        <p>Scan the QR code below, receive a push notification on your device. Approve and sign in!</p>

                        <div>
                            <a href="https://itunes.apple.com/us/app/acceptto-itsme/id893534370?mt=8" target="_blank">
                                <img src="https://s3-us-west-2.amazonaws.com/acceptto-log-and-graphics/Asset+14.png" alt="App Store" title="App Store" width="151.25" height="50">
                            </a>
                            <a href="https://play.google.com/store/apps/details?id=com.acceptto.mfa&amp;amp;hl=en" target="_blank">
                                <img src="https://s3-us-west-2.amazonaws.com/acceptto-log-and-graphics/Asset+13.png" alt="Google Play" title="Google Play" width="151.25" height="50">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-text">
                    <p/>
                    <form method="post" id="fmAccepttoQRCode">
                        <script type="text/javascript" th:inline="javascript">
                            /*<![CDATA[*/
                            $(function () {
                                var uid = /*[[${accepttoApplicationId}]]*/;
                                var hex1 = Math.floor(Math.random() * 16777215).toString(16);
                                var hex2 = Math.floor(Math.random() * 16777215).toString(16);
                                var date = new Date();
                                var time_since_epoch = date.getTime();
                                var channel = time_since_epoch + hex1 + hex2;
                                var qrcodeJSON = '{ "app_uid":"' + uid + '", "channel":"' + channel + '" }';
                                var qrcode = window.btoa(qrcodeJSON);
                                var src = "https://chart.apis.google.com/chart?cht=qr&chs=250x250&chl=" + qrcode + "#&chld=H|0";
                                $('#login_qrcode').attr("src", src);

                                var faye = new Faye.Client("https://faye.acceptto.com/faye");
                                faye.subscribe("/messages/" + channel,
                                    function (data) {
                                        $('#channel').val(channel);
                                        $('#fmAccepttoQRCode').submit();
                                    }
                                );
                            });
                            /*]]>*/
                        </script>

                        <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                        <input type="hidden" id="channel" name="channel"/>
                        <input type="hidden" name="_eventId" value="accepttoQRLogin"/>
                    </form>

                    <center>
                        <img id="login_qrcode" alt="QR Code" class="autowidth" width="250">
                    </center>
                </div>
            </div>
        </div>
    </div>
</main>
</body>
</html>
